Skip to content

feat: add folder upload support to FileInput and FileDropzone#4207

Open
kevingomes17 wants to merge 1 commit intocloudscape-design:mainfrom
kevingomes17:feature/upload-folder-using-file-input-component
Open

feat: add folder upload support to FileInput and FileDropzone#4207
kevingomes17 wants to merge 1 commit intocloudscape-design:mainfrom
kevingomes17:feature/upload-folder-using-file-input-component

Conversation

@kevingomes17
Copy link

Description

This PR adds folder upload support to the FileInput and FileDropzone components, enabling users to select and upload entire folders of files.

Key changes:

FileInput Component:

  • Added new mode prop ('file' | 'folder') to enable folder selection
  • When mode='folder', the component renders with the webkitdirectory attribute
  • Folder mode automatically enables multiple file selection regardless of the multiple prop
  • Files are filtered by accept criteria after selection (since native accept filtering doesn't work with webkitdirectory)

FileDropzone Component:

  • Added new accept prop to filter dropped files by type
  • Enhanced onDrop handler to recursively traverse dropped folders using DataTransferItem.webkitGetAsEntry() API
  • Supports mixed drops of files and folders, combining all files into a single array

Shared Utilities:

  • Created accept-filter.ts with file type filtering functions supporting extensions (.jpg, .png) and MIME types (image/*)
  • Created folder-traversal.ts with async folder traversal utilities

Type Declarations:

  • Added TypeScript declarations for webkitdirectory attribute and FileSystem API types in
    global.d.ts
  • Updated component definitions for documentation

Related links, issue #, if available: https://quip-amazon.com/0y0pAIzFG0mD/Folder-support-for-file-input-Tech-design

How has this been tested?

  • Unit tests pass for all modified components
  • Snapshot tests updated for component definitions
  • Manual testing of folder selection in FileInput with mode='folder'
  • Manual testing of folder drag-and-drop in FileDropzone

The following items are to be evaluated by the author(s) and the reviewer(s).

Correctness

  • Changes include appropriate documentation updates.
  • Changes are backward-compatible if not indicated, see CONTRIBUTING.md.
  • Changes do not include unsupported browser features, see CONTRIBUTING.md.
  • Changes were manually tested for accessibility, see accessibility guidelines.

Security

Testing

  • Changes are covered with new/existing unit tests?
  • Changes are covered with new/existing integration tests?

By submitting this pull request, I confirm that you can use, modify, copy, and redistribute this contribution, under the terms of your choice.

@kevingomes17 kevingomes17 requested a review from a team as a code owner January 26, 2026 07:51
@kevingomes17 kevingomes17 requested review from ClaudioGSDB and removed request for a team January 26, 2026 07:51
@kevingomes17 kevingomes17 changed the title Added feature to upload folder. Initial import. feat: add folder upload support to FileInput and FileDropzone Jan 26, 2026
@codecov
Copy link

codecov bot commented Jan 26, 2026

Codecov Report

❌ Patch coverage is 30.30303% with 92 lines in your changes missing coverage. Please review.
✅ Project coverage is 96.85%. Comparing base (8eeade2) to head (d6e3626).

Files with missing lines Patch % Lines
src/internal/utils/accept-filter.ts 6.12% 41 Missing and 5 partials ⚠️
src/internal/utils/folder-traversal.ts 35.71% 44 Missing and 1 partial ⚠️
src/file-input/internal.tsx 87.50% 1 Missing ⚠️
Additional details and impacted files
@@            Coverage Diff             @@
##             main    #4207      +/-   ##
==========================================
- Coverage   97.19%   96.85%   -0.34%     
==========================================
  Files         886      888       +2     
  Lines       26008    26136     +128     
  Branches     9421     9456      +35     
==========================================
+ Hits        25278    25314      +36     
- Misses        724      769      +45     
- Partials        6       53      +47     

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:
  • ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
  • 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

@ClaudioGSDB ClaudioGSDB force-pushed the feature/upload-folder-using-file-input-component branch from b67691d to d6e3626 Compare February 10, 2026 12:48
@ClaudioGSDB
Copy link
Member

Hey @kevingomes17 this looks good, just make sure to add more test coverage (you can see a summary from codecov)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants